<template>
  <div id="shop">
    <nav-bar class="nav-bar">
      <template v-slot:center>
        <div>商品分类</div>
      </template>
    </nav-bar>
    <div class="tab-control-wrapper">
        <tab-control :titles="['综合', '新品', '销量']"
                     class="tab-control1"
                     ref="tabControl1"
                     @tabClick="tabClick"
                     v-show="isShowTabControl"/>
    </div>
    <div class="content">
      <tab-menu :categories="categories"
                class="tab-menu"
                @menuListItemClick="menuListItemClick" />


      <scroll id="tab-content"
              ref="scroll"
              :probeType="3"
              @scroll="backTopScroll">
        <div>
          <shop-content :subcategories="showSubcategory"
                        class="shop-content"
                        @shopImgLoad="shopImgLoad"/>
          <tab-control :titles="['综合', '新品', '销量']"
                       ref="tabControl2"
                       @tabClick="tabClick"/>
          <tab-control-detail :category-detail="showCategoryDetail"
                              @tGoodsItemLoad="tGoodsItemLoad" />
        </div>
      </scroll>
    </div>
    <back-top v-show="isShowBackTop"  @click="backTopClick"></back-top>
  </div>
</template>

<script>
import NavBar from 'components/common/navbar/NavBar'

import TabMenu from './shopComps/TabMenu.vue'
import ShopContent from './shopComps/ShopContent.vue'
import TabControlDetail from './shopComps/TabControlDetail.vue'

import Scroll from 'components/common/scroll/Scroll'
import TabControl from 'components/content/tabControl/TabControl'
import BackTop from 'components/content/backTop/BackTop'

import {getCategory, getSubcategory, getCategoryDetail} from 'network/shop.js'
// import BScroll from '@better-scroll/core'
// import PullUp from '@better-scroll/pull-up'
// BScroll.use(PullUp)
export default {
  name: "Shop",
  components:{
    NavBar,
    TabMenu,
    ShopContent,
    TabControlDetail,
    TabControl,
    Scroll,
    BackTop
  },
  data(){
    return {
      scroll: null,
      categories: [],
      categoryData: [],
      currentIndex: -1,
      currentType: 'pop',
      isShowTabControl: false,
      isShowBackTop: false
    }
  },
  created(){
    this.getCategory()
  },
  mounted() {

  },
  computed:{
    showSubcategory() {
      if (this.currentIndex === -1) return {}
      return this.categoryData[this.currentIndex].subcategories
    },
    showCategoryDetail() {
      if (this.currentIndex === -1) return []
      return this.categoryData[this.currentIndex].categoryDetail[this.currentType]
    }
  },
  methods: {
    getCategory(){
      getCategory().then(res => {
        //1.获得分类的数据
        this.categories = res.data.category.list
        // 2.初始化每个类别的子数据
        for (let i = 0; i < this.categories.length; i++) {
          this.categoryData[i] = {
            subcategories: {},
            categoryDetail: {
              'pop': [],
              'new': [],
              'sell': []
            }
          }
        }
        //3.请求第一条数据
        this._getSubcategories(0)
      })
    },
    _getSubcategories(index){
      this.currentIndex = index;
       const mailKey = this.categories[index].maitKey;
       //通过mailKey获取不同的数据
       getSubcategory(mailKey).then(res => {
         this.categoryData[index].subcategories = res.data
         this.categoryData = {...this.categoryData}
         this._getCategoryDetail('pop')
         this._getCategoryDetail('sell')
         this._getCategoryDetail('new')
         this.$refs.scroll.refresh()

       })
    },
    _getCategoryDetail(type) {
      // 1.获取请求的miniWallkey
      const miniWallkey = this.categories[this.currentIndex].miniWallkey;
      // 2.发送请求,传入miniWallkey和type
      getCategoryDetail(miniWallkey, type).then(res => {
        // 3.将获取的数据保存下来
        this.categoryData[this.currentIndex].categoryDetail[type] = res
        this.categoryData = {...this.categoryData}
      })
    },
    // dataLoad(){
    //   console.log('数据完毕，进行刷新')
    //   this.$refs.scroll.refresh()
    // },
    shopImgLoad(){
      // console.log('图片加载完毕，进行刷新')
      this.$refs.scroll.refresh()
    },
    tGoodsItemLoad(){
      // console.log('图片加载完毕，进行刷新')
      this.$refs.scroll.refresh()
    },
    menuListItemClick(index){
      this._getSubcategories(index)
      setTimeout(() => {
        console.log('---')
         this.$refs.scroll.refresh()
      },500)

    },
    // 监听滚动的位置
    backTopScroll(position){
      const positionY = -position.y
      // 判断backTop按钮是否显示
      this.isShowBackTop = positionY > 1000

      //判断tabControl是否吸顶
      if(positionY >= this.$refs.tabControl2.$el.offsetTop){
        this.isShowTabControl = true
      }else{
        this.isShowTabControl = false
      }
    },
    backTopClick(){
      this.$refs.scroll.scrollTo(0,0,500)
    },
    //点击切换["综合", "新款", "热销"]标题的按钮，并与吸顶后的组件同步
    tabClick(index){
      switch (index){
        case 0 :
          this.currentType = 'pop'
          break
        case 1:
          this.currentType = 'new'
          break
        case 2:
          this.currentType = 'sell'
          break
      }
      // console.log(this.currentType)
      this.$refs.tabControl1.currentIndex = index
      this.$refs.tabControl2.currentIndex = index
    }
  }
}
</script>

<style scoped>
  #shop{
    height: 100vh;
  }
  .nav-bar{
    background-color: var(--color-tint);
    color: #fff;
    font-weight: 500;
  }
  .tab-menu{
    overflow: hidden;
  }
  #tab-content {
    height: calc(100vh - 44px - 49px);
    flex: 1;
    position: absolute;
    top: 44px;
    margin-left: 96px;
    overflow: hidden;
  }
 .tab-control-wrapper{
    position: absolute;
    width: calc(100% - 96px);
    z-index: 9;
    left: 96px;
    background-color: #fff;
  }

</style>
